<template>
  <span v-if="data" class="design-complete-status" :style="styles">{{ text }}</span>
</template>

<script setup lang="ts" name="designCompleteStatus">
import { computed } from 'vue';
import { DesignWork } from '/@/models';
import dayjs from 'dayjs';

interface IProps {
  data: DesignWork;
}

const props = defineProps<IProps>();

const text = computed(() => {
  if (!props.data.complete_date) {
    return '-';
  }

  if (dayjs(props.data.complete_date).isAfter(props.data.end_date)) {
    return '超时完成';
  }

  return '正常完成';
});

const colors = {
  '-': '#999',
  正常完成: '#2FC207',
  超时完成: '#F00404',
};

const styles = computed(() => {
  return {
    color: colors[text.value],
  };
});
</script>
